<template>
    <div class="mod_header">
        <div class="section_inner">
          <h1 class="qqmusic_title">
            <a href="#">
              <img src="@/assets/logo.png" alt="" class="logo_img">
            </a>
          </h1>
          <ul class="mod_top_nav" >
            <li class="top_nav_item" id="Musichall">
              <a href="#">音乐馆</a>
            </li>
            <li class="top_nav_item">
              <a href="#">
                我的音乐
              </a>
            </li>
            <li class="top_nav_item_client">
              <a href="#">
                客户端
                <img src="@/assets/mark_1.png" alt="" class="top_nav_mark">
              </a>
              <div class="popup_data_detail">
                <div class="popup_data_detail_con">
                  <p>
                    <i class="HQ_icon"></i>
                    HQ高品质  全员开启
                  </p>
                  <p>
                    <i class="yinxiao_icon"></i>
                    独家音效  全面升级
                  </p>
                  <p>
                    <i class="pifu_icon"></i>
                    轻盈视觉  动态皮肤
                  </p>
                  <a href="#!">
                    下载体验
                  </a>
                </div>
              </div>
            </li>
            <li class="top_nav_item">
              <a href="#">
                开放平台
              </a>
            </li>
            <li class="top_nav_item">
              <a href="#">
                VIP
              </a>
            </li>
          </ul>
          <ul class="mod_top_subnav">
            <li class="top_subnav_item">
              <router-link to="/" id="home">首页</router-link>
            </li>
            <li class="top_subnav_item">
              <router-link to="/GeShouPage">歌手</router-link>
            </li>
            <li class="top_subnav_item">
              <router-link to="/XinDiePage" >新碟</router-link>
            </li>
            <li class="top_subnav_item">
              <router-link to="/PaiHangBang" >排行榜</router-link>
            </li>
            <li class="top_subnav_item">
              <router-link to="/GeDanPage" >分类歌单</router-link>
            </li>
            <li class="top_subnav_item">
              <router-link to="/DianTaiPage">电台</router-link>
            </li>
            <li class="top_subnav_item">
              <router-link to="/MVPage">MV</router-link>
            </li>
            <li class="top_subnav_item">
              <router-link to="/ZhuanJiPage">数字专辑</router-link>
            </li>
          </ul>
          <div class="mod_top_search">
            <div class="mod_search_input">
              <input class="search_input_input" type="text" placeholder="搜索音乐、MV、歌单、用户">
              <button class="search_input_btn">
                <i class="search_icon"></i>
                <span class="icon_txt">搜索</span>
              </button>
            </div>
            <div class="mod_search_result"></div>
            <div class="mod_search_other">
              <div class="search_hot">
              </div>
              <div class="search_history"></div>
            </div>
          </div>
          <div class="header_opt">
            <span>
              <a href="#" class="select_login">登录</a>

              <div class="mod_select_open">
                <a href="#" id="Openvip">
                  开通vip
                </a>
                <ul class="select_box">
                  <li class="select_box_item">开通超级会员</li>
                  <li class="select_box_item">开通绿钻豪华版</li>
                </ul>
              </div>

            </span>
          </div>
        </div>
    </div>

  </template>
  
  <script>
  
  
  export default {
    name: 'NviHead',
  
  }
  </script>
  
  <style scoped lang="scss">
  @mixin sprite_icon {
    display: inline-block;
    background-image: url('@/assets/sprite_privilege.png');
    width: 14px;
    height: 14px;
  }
  .mod_select_open{
    &:hover{
      .select_box{
        display: block;
      }
    }
  }
  .select_box{
    box-sizing: border-box;
    top: -1px;
    position: relative;
    display: none;
    list-style: none;
    text-decoration: none;
    border: 1px solid grey;
    padding: 0px 0px !important;

    &_item{
      // width: 100%;
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      white-space: nowrap;
      border-top:1px solid grey;
      &:hover{
        background-color: #31c27c;
        color: #fff;
      }
    }
  }
  .top_nav_mark{
    position: absolute;
    right: 0;
    height: 14px;
   top: 40px;

  }
  .top_nav_item_client{
    position: relative;
    &:hover{
      position: relative;
      .popup_data_detail{
        display: block;
      }
    }
  }
   .popup_data_detail{
    background-color: #ffffff;
    position: absolute;
    display: none;
    top: 80px;
    height: 162px;
    width: 156px;
    z-index: 99;
    box-shadow: 0 0 4px rgba(0,0,0,.35);
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    &_con{
      display: flex;
      flex-direction: column;
      white-space: nowrap;
      p{
        display: block;
        font-size: 12px;
      }
      a{
        display: block;
        font-size: 12px !important;
        background-color: #31c27c;
        border-radius: 8px;
        text-align: center;
        color: #fff !important;
      }
      .HQ_icon{
        @include sprite_icon();
        background-position: 0 0;
      }
      .yinxiao_icon{
        @include sprite_icon();
        background-position: 0 -30px;

      }
      .pifu_icon{
        @include sprite_icon();
        background-position: 0 -60px;
      }
    }
   }
  .qqmusic_title{
    a{
      line-height: 120px;
    }
  }
  .select_login{
    line-height: 38px;
    padding: 0 15px;
    text-decoration: none;
    color: #000;
    margin-right: 16px;
    }
 
  .mod_select_open{
    height: 38px;
    width: 122px;
    background-color: #31c27c;
    font-size: 13px;
    text-align: center;
    border-radius: 3px;
  }
  .mod_select_open a{
    color:white;
    text-decoration: none;
  }
  #Openvip{
    line-height: 38px;
  }
  .search_input_btn{
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
   width: 38px;
   height: 35px;
   overflow: visible;
    background: transparent;
    cursor: pointer;
  }
  .icon_txt{
    font:0/0 a;
  }
  .search_icon{
    background-image: url('@/assets/icon_set.png');
    position: absolute;
    top: 50%;
    right: 11px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    background-position: 0 -40px;
  }
  .mod_search_input{
    border: 1px solid #c9c9c9;
   padding: 0 33px 0 11px;
    line-height: 36px;
  height: 36px;
  position: relative;
  border-radius: 3px;
  background-color: #fff;
  }
  .search_input_input{
    width: 174px;
    height: 30px;
    border: 0;
    font-size: 14px;
  }
  
  .top_subnav_item a{
    text-decoration: none;
    font-size: 18px;
    color: #0c0c0b;
    &:hover{
      color: #31c27c;
    }
  }
  .router-link-active:not(#home){//使用了伪类，选择不给home添加这个样式
  color: #31c27c;
 }
 #home:focus{//利用了vue-router自动添加的被激活的链接被添加的类
  color: #31c27c;

 }
  .mod_header{
      display: flex;
      justify-content: center;
      margin-top: -25px;
  }
  .mod_header .section_inner{
      display: grid;
      grid-template-rows: 144px 51px;
      /* grid-template-columns: 1fr 2fr 1fr; */
      width: 1200px;
  }
  .mod_header .section_inner h1{
      grid-row: 1;
  }
  .mod_header .section_inner .mod_top_nav{
      grid-row: 1;
      display: flex;
      justify-content: space-between;
      list-style: none;
      
  }
  .logo_img{
    margin-top: 25px;
  }
  .mod_header .section_inner .mod_top_nav a{
      text-decoration: none;
      padding: 0 20px;
      font-size: 18px;
      color:#0c0c0b;
     
  }
  .mod_header .section_inner .mod_top_subnav{
    position: relative;
    z-index: 1;
      grid-row: 2;
      /* grid-column: 2; */
      grid-column:2 /span 2;
      justify-self: center;
      list-style: none;
      display: flex;
      list-style: none;
  }/*第二行：首页，歌手,在grid布局的基础上采用flex布局*/
  .mod_header .section_inner .mod_top_subnav li{
      padding: 0 15px;
  }
  .mod_header .section_inner .mod_top_search{
      grid-row: 1;
  }
  .mod_header .section_inner .header_opt{
      grid-row: 1;
  }
  .mod_top_nav li{
      display: flex;
    align-items: center;
  }
  #Musichall {
    background-color: #31c27c;
    vertical-align:middle;
    
  }
  #Musichall a{
      color: #ffffff;
  }
 .mod_top_search {
  display: flex;
  align-items: center;
 }
 .header_opt{
  display: flex;
  align-items: center;
 }
 .header_opt span{
  display: flex;
  
 }
 .header_opt span *{
  padding: 0 5px;
 }
 .mod_top_subnav{
  position: relative;
 }
 
 #Openvip{
  background-color:  #31c27c;
 }
</style>
  